<template>
  <Card>
    <p slot="title">高危化工品单位安全情况</p>
    <div class="chart" id="chart-chemistry-production"></div>
    <Divider />
    <span class="text">总体告警率：{{percentage}}%</span>
    <Spin v-show="loading" fix size="large" />
  </Card>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      percentage: 0,
      option: null,
      loading: false
    };
  },
  methods: {
    renderChart() {
      this.loading = true;
      this.option = {
        grid: { top: 20, left: 20, right: 40, bottom: 0, containLabel: true },
        tooltip: {
          show: true,
          trigger: "item",
          axisPointer: { type: "shadow" }
        },
        xAxis: {
          type: "category",
          data: [
            "高危险\n危险指数高于80",
            "中等危险\n危险指数高于60",
            "较低危险\n危险指数低于60",
            "安全\n危险指数为0"
          ],
          axisLine: { color: "#333" },
          axisLabel: { color: "#444", fontSize: 12,interval:0,rotate:45 },
          splitLine: { show: true, color: "#00000025" },
          splitArea: { show: true, color: "#00000010" }
        },
        yAxis: {
          type: "value",
          axisLine: { color: "#333" },
          axisLabel: { color: "#444", fontSize: 12 },
          splitLine: { show: true, color: "#00000025" },
          splitArea: { show: true, color: "#00000010" }
        },
        series:[{
            type:'bar',
            name:'高危化工品安全情况',
            data:[{
                name:'高危险等级',value:0
            },{
                name:'中等危险',value:0
            },{
                name:'较低危险',value:0
            },{
                name:'安全',value:0
            }],
            barWidth:'30%',
            itemStyle:{
                show:true,
                color:{
                    type:'linear',
                    x:0,
                    y:0,
                    x2:0,
                    y2:0,
                    colorStops:[{
                        offset:0,color:this.COLORS[5]
                    },{
                        offset:1,color:this.COLORS[6]
                    }]
                },
                barBorderRadius:[8,8,0,0]
            },
            label:{
                show:true,
                position:'top',
                
            }
        }]
      };
      this.$Crender('chart-chemistry-production',this.option)
      this.loading = false
    }
  },
  mounted() {
      this.renderChart()
  },
};
</script>

<style scoped>
.chart{
    height:410px;
}
</style>
